<script setup lang="ts">
import { levelEnum } from "@@/enum/globalEnum";
const props = defineProps<{
  level?: StrNumber;
}>();
</script>

<template>
  <div class="BwkLevel">
    <Rimage
      class="BwkLevel_img"
      height="65rem"
      :src="levelEnum[Number(props.level || 0)].wkImg"
    />
    <div
      class="BwkLevel_text"
      :style="{ color: levelEnum[Number(props.level || 0)].color }"
    >
      {{ levelEnum[Number(props.level || 0)].text }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.BwkLevel {
  display: inline-block;
  position: relative;
  .BwkLevel_text {
    position: absolute;
    inset: 0;
    margin: auto;
    margin-left: 30%;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: var(--T-S-sm);
    justify-content: center;
    font-weight: 600;
  }
}
</style>
